<script setup lang="ts">
import { SvgIcon } from '@base-comp'
import { useLangStroe, pinia } from '@stores'
import { LocaleType } from '#types/local'
import { computed, unref } from 'vue'
import i18n from '@/lang'
import {LANGMAP} from '@/config'

const localStore = useLangStroe(pinia)
const localList = computed(() => localStore.getLangMap)
const currentLang = computed(() => localStore.getCurrentLang)

const changeLang = (lang: LocaleType) => {
  // 判同
  if (lang === unref(currentLang).lang) return
  localStore.setLang({
    lang
  })
  const { locale } = i18n.global
  locale.value = lang as unknown as LANGMAP
}
</script>
<template>
  <el-dropdown trigger="click" @command="changeLang">
    <div style="margin-top: 7px">
      <svg-icon icon-name="language-sharp"  :size="22" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item
          v-for="item in localList"
          :key="item.lang"
          :command="item.lang"
        >
          <span style="display: inline-block;width: 20px;margin-top:4px">
            <el-icon v-if="item.lang === currentLang.lang ? 'select' : ''"><Select /></el-icon>
          </span>
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
